import React from 'react';
import { Form, Select } from '@teamix/ui';
import { ButtonIcon, YunxiaoIcon } from '@alife/devops-ui';
import Popup from 'components/popup';
// import constants from 'utils/constants';

// const { languageOptions } = constants.ENUM;

// const { RangePicker } = DatePicker;
import intl from '../../../../../../../../../locale';

const formItemLayout = {
  labelCol: {
    span: 6,
  },

  wrapperCol: {
    fixedSpan: 12,
  },
};

const issuelevelList = [
  { value: 'Blocker', label: 'Blocker' },
  { value: 'Critical', label: 'Critical' },
  { value: 'Major', label: 'Major' },
];

const issueTypeList = [
  {
    value: 'indirect_dependency',
    label: intl.get({
      id: 'code-assets.dependencyAnalysis.containers.filter.All',
      defaultMessage: '全部',
    }),
  },
  {
    value: 'dependency',
    label: intl.get({
      id: 'code-assets.dependencyAnalysis.containers.filter.DirectDependency',
      defaultMessage: '直接依赖',
    }),
  },
];

const aiFixList = [
  {
    value: 'suggestion',
    label: intl.get({
      id: 'code-assets.dependencyAnalysis.containers.filter.RecommendedSolutions',
      defaultMessage: '推荐修复方案',
    }),
  },
  {
    value: 'patch',
    label: intl.get({
      id: 'code-assets.dependencyAnalysis.containers.filter.SupportsAutomaticRepair',
      defaultMessage: '支持自动修复',
    }),
  },
];

export default class FilterForm extends React.Component {
  updateTableParams = (obj) => {
    const tableParams = { ...this.props.tableParams, ...obj };
    this.props.updateTableParams(tableParams);
  };

  onResetClick = () => {
    this.props.updateTableParams({
      build_language: '',
      issue_level_list: [],
      issue_type: 'indirect_dependency',
      issue_filter: null,
    });
  };

  render() {
    const { tableParams } = this.props;
    return (
      <Popup
        className="security-dependency-popup"
        trigger={
          <ButtonIcon
            name="filter-line"
            style={{
              marginRight: 10,
              marginLeft: 10,
              marginBottom: 2,
            }}
          />
        }
        triggerType="click"
        footer={
          <Form.Item style={{ marginBottom: 0 }}>
            <Form.Reset
              text
              type="primary"
              style={{ border: 0 }}
              onClick={this.onResetClick}
              toDefault
            >
              <YunxiaoIcon type="delete-line" />
              {intl.get({
                id: 'code-assets.dependencyAnalysis.containers.filter.ClearAllFilterConditions',
                defaultMessage: '清除所有筛选条件',
              })}
            </Form.Reset>
          </Form.Item>
        }
      >
        <Form {...formItemLayout} labelTextAlign="left">
          {/* <Form.Item label="语言">
             <Select
               followTrigger
               value={tableParams.build_language}
               onChange={(value) => {
                 this.updateTableParams({
                   build_language: value,
                 });
               }}
             >
               {
                 Object.keys(languageOptions).map((lang) => {
                   return <Select.Option value={lang} key={lang}>{lang}</Select.Option>;
                 })
               }
             </Select>
            </Form.Item> */}
          <Form.Item
            label={intl.get({
              id: 'code-assets.dependencyAnalysis.containers.filter.VulnerabilityLevel',
              defaultMessage: '漏洞等级',
            })}
          >
            <Select
              mode="multiple"
              followTrigger
              dataSource={issuelevelList}
              value={tableParams.issue_level_list}
              onChange={(value) => {
                this.updateTableParams({
                  issue_level_list: value,
                });
              }}
            />
          </Form.Item>
          <Form.Item
            label={intl.get({
              id: 'code-assets.dependencyAnalysis.containers.filter.Dependencies',
              defaultMessage: '依赖关系',
            })}
          >
            <Select
              followTrigger
              dataSource={issueTypeList}
              value={tableParams.issue_type}
              onChange={(value) => {
                this.updateTableParams({
                  issue_type: value,
                });
              }}
            />
          </Form.Item>
          <Form.Item
            label={intl.get({
              id: 'code-assets.dependencyAnalysis.containers.filter.IntelligentRepair',
              defaultMessage: '智能修复',
            })}
            style={{ marginBottom: 0 }}
          >
            <Select
              hasClear
              followTrigger
              dataSource={aiFixList}
              value={tableParams.issue_filter}
              onChange={(value) => {
                this.updateTableParams({
                  issue_filter: value,
                });
              }}
            />
          </Form.Item>
        </Form>
      </Popup>
    );
  }
}
